<template lang="pug">
#app
  change-pwd-dialog
  confirm
  preview-modal
  preview-carousel
  app-sidebar(v-if="$route.meta.appSldebar === 'show'")
  .app-container(:style="$route.meta.appHeader === 'show' ? { 'width': 'calc(100% - 122px)' } : { 'width': '100%' }")
    app-header(v-if="$route.meta.appHeader === 'show'")
    .view-container(:style="$route.meta.appHeader === 'show' ? { 'marginTop': '56px', 'height': 'calc(100% - 56px)' } : { 'height' : '100%' }")
    
      lower-sidebar(v-if="$route.meta.lowerSidebar === 'show'")
      .view(:style="$route.meta.appHeader === 'show' ? { 'padding': '0 16px' } : {}")
        view-header(v-if="$route.meta.viewHeader === 'show'")
        keep-alive(exclude="systemManage,brandManage,indexManage,puzzle,personManage,appletsManage,otherManage,materialManage,userManage,notice,storeroom")
          router-view
</template>
<script>
import appSidebar from '@/components/appSidebar'
import appHeader from '@/components/appHeader'
import confirm from '@/components/modal/confirm'
import changePwdDialog from '@/components/modal/changePwdDialog'
import previewModal from '@/components/modal/previewModal.vue'
import previewCarousel from '@/components/modal/previewCarousel'
import lowerSidebar from '@/components/lowerSidebar'
import viewHeader from '@/components/viewHeader'
export default {
  name: 'app',
  components: {
    appSidebar,
    appHeader,
    confirm,
    changePwdDialog,
    previewModal,
    previewCarousel,
    lowerSidebar,
    viewHeader
  },
  data () {
    return {}
  },
  methods: {},
  // beforeRouteEnter (to, from, next) {
  //   next(vm => {})
  // },
  // beforeRouteUpdate (to, from, next) {
  //   next()
  // },
  // beforeRouteLeave (to, from, next) {
  //   next()
  // },
}
</script>
<style lang="scss">
#app {
  height: 100%;
  display: flex;
  font-size: 14px;
}
.app-container {
  height: 100%;
}
.view-container {
  display: flex;
  width: 100%;
  &.full-screen {
    margin-top: 0;
    height: 100%;
    .view {
      padding: 0;
    }
  }
}
.view {
  height: 100%;
  width: 100%;
  overflow: auto;
  background: #FAFAFE;
  
}
</style>
